import React, { PureComponent } from 'react'

import styles from './styles.scss';

export default LoadComponent => (

    class AsyncComponent extends PureComponent {

        constructor() {
            super();
            this.state = {
                Component: null,
                success: true
            }
        }

        destroy = false;

        componentDidMount() {
            this.loadComponent();
        }

        componentWillUnmount() {
            this.destroy = true;
        }

        loadComponent() {
            loading();
            let Component = null,
                success   = true;
            LoadComponent().then( module => {
                Component = module.default;
            }).catch(() => {
                success = false;
            }).finally(() => {
                if(this.destroy) return;
                this.setState({ Component, success });
                loadingClose();

            });
        }

        getParams() {
            const { params = {} } =this.props.match;
            return {
                ...this.props,
                params
            }
        }

        render() {

            const { Component , success} = this.state;

            if ( !success ) {

            }

            return !!Component ? <Component {...this.getParams()}/> : null;
        }
    }

);


const Wait = props => (
    <div className={styles.load_wait_laye}>
        <div className={styles.mod_load_loading}>
            <div className={styles.center}>
                <i className={styles.loading}/>
                <p>加载中...</p>
            </div>
        </div>
    </div>
);





